<template>
    <div class="chart" ref="chart"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';

//数据
const x_data = ref(['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'])
const y_data1 = ref([43.3, 29.9, 37.2, 41.8, 39.9, 42.2, 42.2, 39.5, 42.1, 33.0, 41.7, 58.9])
const y_data2 = ref([46.5, 26.7, 28.6, 39.7, 40.6, 38.5, 35.4, 39.7, 42.0, 35.8, 41.0, 54.3])
const y_data3 = ref([38.4, 31.7, 38.4, 33.3, 45.8, 43.1, 39.8, 39.4, 40.5, 45.1, 49.5, 58.9])
const y_data4 = ref([52.7, 31.9, 40.1, 52.8, 45.8, 43.3, 43.3, 39.7, 42.1, 45.8, 50.6, 64.1])
const y_data5 = ref([37.3, 0.8, 4.2, 58.4, 0.01, 0.5, 8.8, 0.7, 4.1, 1.5, 2.2, 8.7])
// const x_data = ref(['2021','2022','2023','2024'])
// const y_data1 = ref([82.1,74.4,66.1,61.6])
// const y_data2 = ref([16.7,15.7,13.1,11.2])
// const y_data3 = ref([30.1,27.1,23.6,21.1])
// const y_data4 = ref([-5.2,-8.7,-8.2,-4.1])
//1. 创建dom引用
const chart = ref()

// setup组合式api都是在dom元素挂载之前执行
// echart的渲染时机是在dom元素挂载之后，所以需要将代码写在onMounted()钩子函数中
onMounted(() => {
    // 2.基于创建好的dom，初始化echarts实例
    const myChart = echarts.init(chart.value);

    // 3.指定数据和配置项
    const option = {
        //背景颜色
        backgroundColor: "white",
        //标题
        title: {
            text: "图1 七大行业税收与总税收对比图",
            left: "center",
            bottom: 5,
            show: false,
            textStyle: {
                fontFamily: "SimHei",
                fontSize: 12
            }
        },
        //图例
        legend: {
            //距离顶部的距离
            top: 8,
            //文本样式设置
            textStyle: {
                fontFamily: "Arial",
                fontWeight: "bold",
                fontSize: 15,
                color: "black"
            }
        },
        //绘图网格
        grid: {
            left: 40,
            right: 40,
            bottom: 30,
            top: 65,
            // width:500,
            // height:190,
        },
        //下载工具
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {
                    // 导出图片的分辨率
                    pixelRatio: 20
                },

            }
        },
        // x轴
        xAxis: {
            type: 'category',
            //控制刻度线显示
            axisTick: false,
            //刻度标签配置
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 18,
                fontWeight: "bold",
                color: "black",
            },
            //x轴轴线
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    color: "black"
                }
            },
            data: x_data.value
        },
        // y轴
        yAxis: [{
            type: 'value',
            // y轴标题设置
            name: "亿元",
            // nameGap: 35,
            nameLocation: "end",
            nameTextStyle: {
                fontSize: 10,
                fontFamily: "Arial",
                fontWeight: "bold",
                color: "black"
            },
            // min:-2,
            //y轴轴线
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    color: "black"
                }
            },
            //y轴刻度
            axisTick: {
                show: true,
                inside: true
            },
            //刻度标签
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 18,
                fontWeight: "bold",
                color: "black"
            },
            // 控制分割线是否显示
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#ddd',
                    width: 1,
                    type: "dashed",
                    opacity: 0.5
                }
            }
        },
        {
            type: 'value',
            name: '%',
            nameLocation: "end",
            nameTextStyle: {
                fontSize: 12,
                fontFamily: "Arial",
                fontWeight: "bolder",
                color: "black"
            },
            //刻度标签
            axisLabel: {
                fontFamily: "Arial",
                fontSize: 18,
                fontWeight: "bold",
                color: "black"
            },
            //y轴轴线
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    color: "black"
                }
            },
            //y轴刻度
            axisTick: {
                show: true,
                inside: true
            },
            // 控制分割线是否显示
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#ddd',
                    width: 1,
                    type: "dashed",
                    opacity: 0.5
                }
            }
        }],
        // 数据项
        series: [
            {
                type: 'bar',
                name: "销购差",
                data: y_data1.value,
                //柱子宽度
                barWidth: 6,
                //系列柱之间的间距
                barGap: "25%",
                //柱条样式
                itemStyle: {
                    color: "#6695ca"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: false,
                    position: ["20%","48%"],
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    fontWeight: "bold",
                    fontSize: 13,
                    color: "black"

                }
            },
            {
                type: 'bar',
                name: "2022年",
                data: y_data2.value,
                //柱子宽度
                barWidth: 6,
                //系列柱之间的间距
                // barGap: "10%",
                //柱条样式
                itemStyle: {
                    color: "#66b3b3"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: false,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    // fontWeight: "bold",
                    fontSize: 13,
                    color: "black"
                }
            },
            {
                type: 'bar',
                name: "2023年",
                data: y_data3.value,
                //柱子宽度
                barWidth: 6,
                //柱条样式
                itemStyle: {
                    color: "#a0bf7e"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: false,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    // fontWeight: "bold",
                    fontSize: 13,
                    color: "black"
                }
            },
            {
                type: 'bar',
                name: "2024年",
                data: y_data4.value,
                //柱子宽度
                barWidth: 9,
                //柱条样式
                itemStyle: {
                    color: "#37383d"
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: false,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    // fontWeight: "bold",
                    fontSize: 13,
                    color: "black"
                }
            },
            {
                name: '批发零售业增值率',
                type: 'line',
                data: y_data5.value,
                yAxisIndex: 1,
                smooth: true,
                //样式
                itemStyle: {
                    color: "#f20101"
                },
                lineStyle: {
                    width: 4,
                    color: "#f20101",
                    // shadowBlur: 3
                },
                //选中变小手
                cursor: "pointer",
                //数据标签设置
                label: {
                    show: true,
                    position: 'top',
                    distance: 1,
                    //文本样式设置
                    fontFamily: "Arial",
                    fontWeight: "bold",
                    fontSize: 13,
                    color: "#f20101",
                    formatter: (params) => {
                        return params.value + "%"
                    }
                }
            },
            // {
            //     name: '总体增值率',
            //     type: 'line',
            //     data: y_data2.value,
            //     yAxisIndex: 1,
            //     smooth: true,
            //     //样式
            //     itemStyle: {
            //         color: "red"
            //     },
            //     lineStyle: {
            //         width: 4,
            //         color: "red",
            //         // shadowBlur: 3
            //     },
            //     //选中变小手
            //     cursor: "pointer",
            //     //数据标签设置
            //     label: {
            //         show: true,
            //         position: 'top',
            //         distance: 1,
            //         //文本样式设置
            //         fontFamily: "Arial",
            //         fontWeight: "bold",
            //         fontSize: 13,
            //         color: "red",
            //         formatter: (params) => {
            //             return params.value + "%"
            //         }
            //     }
            // },
            // {
            //     name: '制造业增值率',
            //     type: 'line',
            //     data: y_data4.value,
            //     yAxisIndex: 1,
            //     smooth: true,
            //     //样式
            //     itemStyle: {
            //         color: "#2a2f28"
            //     },
            //     lineStyle: {
            //         width: 3,
            //         color: "#2a2f28",
            //         // shadowBlur: 3
            //     },
            //     //选中变小手
            //     cursor: "pointer",
            //     //数据标签设置
            //     label: {
            //         show: true,
            //         position: 'top',
            //         distance: 1,
            //         //文本样式设置
            //         fontFamily: "Arial",
            //         fontWeight: "bold",
            //         fontSize: 13,
            //         color: "#2a2f28",
            //         formatter: (params) => {
            //             return params.value + "%"
            //         }
            //     }
            // }
        ]
    }
    // 4.将设置和数据挂载到图形实例中
    myChart.setOption(option);
})
</script>

<style scoped>
.chart {
    width: 700px;
    height: 300px;
    /* 过渡 */
    transition: 0.5s all linear;
}

.chart:hover {
    /* 缩放 */
    transform: scale(1.025);
    /* 小手 */
    cursor: pointer;
    /* box阴影 */
    box-shadow: 0px 0px 30px gray;
}
</style>